dimaslanjaka /
universal-framework
| Conditions | 19 |
| Total Lines | 170 |
| Code Lines | 99 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like alert.ts ➔ createAlert often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /// <reference path="alert.d.ts" /> |
||
| 2 | |||
| 3 | /** |
||
| 4 | * Bootstrap Alert Generator |
||
| 5 | * @example createAlert( |
||
| 6 | "[title] Opps!", |
||
| 7 | "[description] Something went wrong", |
||
| 8 | "[details] Here is a bunch of text about some stuff that happened.", |
||
| 9 | "[mode|bg-color] danger", |
||
| 10 | true, false, |
||
| 11 | { position: "fixed", bottom: "15px", right: "15px" }); |
||
| 12 | */ |
||
| 13 | function createAlert( |
||
| 14 | /** |
||
| 15 | * Title alert |
||
| 16 | */ |
||
| 17 | title: string, |
||
| 18 | /** |
||
| 19 | * Summary description |
||
| 20 | */ |
||
| 21 | summary: string, |
||
| 22 | /** |
||
| 23 | * Another description |
||
| 24 | */ |
||
| 25 | details: string, |
||
| 26 | /** |
||
| 27 | * basic class bootstrap or you can insert color name |
||
| 28 | */ |
||
| 29 | severity: "success" | "error" | "warning" | "info" | "danger", |
||
| 30 | /** |
||
| 31 | * can be closed ? |
||
| 32 | */ |
||
| 33 | dismissible: boolean, |
||
| 34 | /** |
||
| 35 | * auto closed ? |
||
| 36 | */ |
||
| 37 | autoDismiss: boolean, |
||
| 38 | /** |
||
| 39 | * Fill `CSSProperties` object or insert CSS object string |
||
| 40 | * @example {position: 'fixed', top: '5px', right: '5px'} |
||
| 41 | * @example 'position:fixed;top:10px;left:10px;' |
||
| 42 | */ |
||
| 43 | options: React.CSSProperties | string |
||
| 44 | ) { |
||
| 45 | if (severity == "error") { |
||
| 46 | severity = "danger"; |
||
| 47 | } |
||
| 48 | |||
| 49 | if (!$("style#alertcss")) { |
||
| 50 | createStyle( |
||
| 51 | `#pageMessages { |
||
| 52 | position: fixed; |
||
| 53 | bottom: 15px; |
||
| 54 | right: 15px; |
||
| 55 | width: 30%; |
||
| 56 | } |
||
| 57 | |||
| 58 | #pageMessages .alert { |
||
| 59 | position: relative; |
||
| 60 | } |
||
| 61 | |||
| 62 | #pageMessages .alert .close { |
||
| 63 | position: absolute; |
||
| 64 | top: 5px; |
||
| 65 | right: 5px; |
||
| 66 | font-size: 1em; |
||
| 67 | } |
||
| 68 | |||
| 69 | #pageMessages .alert .fa { |
||
| 70 | margin-right:.3em; |
||
| 71 | }`, |
||
| 72 | { id: "alertcss" } |
||
| 73 | ); |
||
| 74 | } |
||
| 75 | |||
| 76 | if (!$("#pageMessages").length) { |
||
| 77 | var style: string = ""; |
||
| 78 | if (typeof options == "string") { |
||
| 79 | style = options; |
||
| 80 | } else if (typeof options == "object") { |
||
| 81 | if (options.length) { |
||
| 82 | for (const key in options) { |
||
| 83 | if (options.hasOwnProperty(key)) { |
||
| 84 | var value = options[key]; |
||
| 85 | if (value && value.length) { |
||
| 86 | style += `${key}: ${value};`; |
||
| 87 | } |
||
| 88 | } |
||
| 89 | } |
||
| 90 | } else { |
||
| 91 | style = "position: fixed;bottom: 15px;right: 15px;width: 30%;"; |
||
| 92 | } |
||
| 93 | } |
||
| 94 | $("body").append('<div id="pageMessages" style="' + style + '"></div>'); |
||
| 95 | } |
||
| 96 | |||
| 97 | var iconMap = { |
||
| 98 | info: "fa fa-info-circle", |
||
| 99 | success: "fa fa-thumbs-up", |
||
| 100 | warning: "fa fa-exclamation-triangle", |
||
| 101 | danger: "fa ffa fa-exclamation-circle", |
||
| 102 | }; |
||
| 103 | |||
| 104 | var iconAdded = false; |
||
| 105 | |||
| 106 | var alertClasses = ["alert", "animated", "flipInX"]; |
||
| 107 | alertClasses.push("alert-" + severity.toLowerCase()); |
||
| 108 | |||
| 109 | if (dismissible) { |
||
| 110 | alertClasses.push("alert-dismissible"); |
||
| 111 | } |
||
| 112 | |||
| 113 | var msgIcon = $("<i />", { |
||
| 114 | class: iconMap[severity], // you need to quote "class" since it's a reserved keyword |
||
| 115 | }); |
||
| 116 | |||
| 117 | var msg = $("<div />", { |
||
| 118 | class: alertClasses.join(" "), // you need to quote "class" since it's a reserved keyword |
||
| 119 | }); |
||
| 120 | |||
| 121 | if (title) { |
||
| 122 | var msgTitle = $("<h4 />", { |
||
| 123 | html: title, |
||
| 124 | }).appendTo(msg); |
||
| 125 | |||
| 126 | if (!iconAdded) { |
||
| 127 | msgTitle.prepend(msgIcon); |
||
| 128 | iconAdded = true; |
||
| 129 | } |
||
| 130 | } |
||
| 131 | |||
| 132 | if (summary) { |
||
| 133 | var msgSummary = $("<strong />", { |
||
| 134 | html: summary, |
||
| 135 | }).appendTo(msg); |
||
| 136 | |||
| 137 | if (!iconAdded) { |
||
| 138 | msgSummary.prepend(msgIcon); |
||
| 139 | iconAdded = true; |
||
| 140 | } |
||
| 141 | } |
||
| 142 | |||
| 143 | if (details) { |
||
| 144 | var msgDetails = $("<p />", { |
||
| 145 | html: details, |
||
| 146 | }).appendTo(msg); |
||
| 147 | |||
| 148 | if (!iconAdded) { |
||
| 149 | msgDetails.prepend(msgIcon); |
||
| 150 | iconAdded = true; |
||
| 151 | } |
||
| 152 | } |
||
| 153 | |||
| 154 | if (dismissible) { |
||
| 155 | var msgClose = $("<span />", { |
||
| 156 | class: "close", // you need to quote "class" since it's a reserved keyword |
||
| 157 | "data-dismiss": "alert", |
||
| 158 | html: "<i class='fa fa-times-circle'></i>", |
||
| 159 | }).appendTo(msg); |
||
| 160 | } |
||
| 161 | |||
| 162 | $("#pageMessages").prepend(msg); |
||
| 163 | |||
| 164 | if (autoDismiss) { |
||
| 165 | setTimeout(function () { |
||
| 166 | msg.addClass("flipOutX"); |
||
| 167 | setTimeout(function () { |
||
| 168 | msg.remove(); |
||
| 169 | }, 1000); |
||
| 170 | }, 5000); |
||
| 171 | } |
||
| 202 |
